<template>
	<div class="problem-list-page">
		<van-sticky>
			<van-search v-model="form.searchTxt" show-action placeholder="请输入搜索关键词" @search="onSearch">
				<template v-slot:action>
					<van-icon name="https://wx.ksepia.com/profile/mini-image/search@3x.png" @click="openFilter"></van-icon>
				</template>
			</van-search>
		</van-sticky>

		<div class="task-item-list">
			<van-empty v-if="rawList.length === 0 && !loading" description="暂无任务数据"></van-empty>

			<div v-for="(item, idx) in rawList" :key="item.id || idx" class="task-item" @click="gotoDetail(item)">
				<div class="task-item-hd">
					<p class="item-paikou">{{ item.pollutionSourceName }}</p>
					<div class="tag-item-view">
						<!-- warn icon when overdue (rectifyLimitDay < 0) -->
						<van-icon
							v-if="item.rectifyLimitDay < 0"
							class="warn-icon"
							name="https://wx.ksepia.com/profile/mini-image/warn.png"
							size="16px"
						></van-icon>
						<span class="tag-rwlxmc">{{ item.problemFrom }}</span>
						<span v-for="t in item.problemRefer" :key="t" class="tag-rwlbmc">{{ t }}</span>
					</div>
					<!-- progress area: show percentage if not 100, else show 已完成 / 进行中 badge -->
					<div class="progress">
						<span v-if="item.progress != null && item.progress !== 100" class="progress-button-num">{{ item.progress }}%</span>
						<span :class="['progress-button', item.progress == 100 ? 'done' : 'doing']">{{ item.progress == 100 ? '已完成' : '进行中' }}</span>
					</div>
				</div>

				<div class="task-item-bd">
					<van-row>
						<van-col :span="6">
							<span class="item-pointer">整改内容：</span>
						</van-col>
						<van-col :span="18">
							<span class="task-item-ft-text value-text">{{ item.problemInfo }}</span>
						</van-col>
					</van-row>
				</div>

				<div class="task-item-bd" v-if="item.fillUser">
					<van-row>
						<van-col :span="12">
							<van-icon name="https://wx.ksepia.com/profile/mini-image/do-task-time-icon.png" size="12"></van-icon>
							<span class="task-item-ft-text dead-time">{{ item.fillTime }}</span>
						</van-col>
						<van-col :span="12">
							<div class="item-distance">
								<van-icon name="https://wx.ksepia.com/profile/mini-image/do-task-user-icon@3x.png" size="12"></van-icon>
								<div class="item-user">{{ item.fillUser }}</div>
							</div>
						</van-col>
					</van-row>
				</div>
			</div>

			<van-divider v-if="rawList.length > 0 && rawList.length === total && hasScrolled" content-position="center"> 我也是有底线的 </van-divider>

			<div v-if="rawList.length < total" class="load-more-wrap">
				<van-button size="small" type="primary" @click="loadMore" :loading="loading">加载更多</van-button>
			</div>
		</div>

		<van-popup v-model:show="showFilterPopup" position="right" :style="{ width: '80%', height: '100%' }" @click-overlay="closeFilter">
			<div class="filter-popup">
				<van-cell-group>
					<form-item-radio
						label="整改状态"
						item-key="status"
						:dic-key="''"
						:option-list="statusList"
						v-model="form.status"
						@change="onRadioChange"
					></form-item-radio>

					<van-cell title="开始时间" :value="form.startDate || '请选择'" is-link @click="openBeginDate">
						<template #right-icon>
							<van-icon name="clock" color="#969799" size="20"></van-icon>
						</template>
					</van-cell>

					<van-cell title="结束时间" :value="form.endDate || '请选择'" is-link @click="openEndDate">
						<template #right-icon>
							<van-icon name="clock" color="#969799" size="20"></van-icon>
						</template>
					</van-cell>
				</van-cell-group>

				<div class="bot-btn-wrap">
					<van-row :gutter="15">
						<van-col :span="12">
							<van-button block plain type="primary" @click="handleReset"> 重置 </van-button>
						</van-col>
						<van-col :span="12">
							<van-button block type="primary" @click="handleSearch"> 搜索 </van-button>
						</van-col>
					</van-row>
				</div>
			</div>
		</van-popup>

		<van-popup v-model:show="showDatePopup" position="bottom">
			<van-date-picker @cancel="closeDate" @confirm="confirmDate" title="选择年月日"></van-date-picker>
		</van-popup>
	</div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { listProblems } from '@/api/problemList'
import FormItemRadio from '@/components/form-item-radio'

export default {
	name: 'ProblemList',
	components: { FormItemRadio },
	setup() {
		const router = useRouter()
		const form = reactive({ status: '2', startDate: '', endDate: '', searchTxt: '' })
		const rawList = ref([])
		const pageNum = ref(1)
		const pages = ref(0)
		const total = ref(0)
		const hasScrolled = ref(false)
		const loading = ref(false)
		const showFilterPopup = ref(false)
		const showDatePopup = ref(false)
		const currOpenDate = ref('startDate')
		const statusList = ref([
			{ value: '3', text: '已完成' },
			{ value: '2', text: '整改中' },
		])

		const queryList = async () => {
			loading.value = true
			try {
				const res = await listProblems({ ...form, pageNum: pageNum.value, pageSize: 10 })
				if (res.code === '0') {
					res.rows.forEach((c) => (c.problemRefer = c.problemRefer ? c.problemRefer.split(',') : []))
					const list = pageNum.value === 1 ? [] : rawList.value
					rawList.value = list.concat(res.rows)
					pages.value = res.pages
					total.value = res.total
				} else {
					showToast(res.message || '获取数据失败')
				}
			} catch (e) {
				console.error('获取问题列表失败', e)
				showToast('网络错误')
			} finally {
				loading.value = false
			}
		}

		const onSearch = (val) => {
			form.searchTxt = val
			pageNum.value = 1
			rawList.value = []
			queryList()
		}

		const openFilter = () => {
			showFilterPopup.value = true
		}
		const closeFilter = () => {
			showFilterPopup.value = false
		}
		const openBeginDate = () => {
			currOpenDate.value = 'startDate'
			showDatePopup.value = true
		}
		const openEndDate = () => {
			currOpenDate.value = 'endDate'
			showDatePopup.value = true
		}
		const closeDate = () => (showDatePopup.value = false)
		const confirmDate = ({ selectedValues }) => {
			const [y, m, d] = selectedValues
			form[currOpenDate.value] = `${y}-${m}-${d}`
			closeDate()
		}

		const handleReset = () => {
			form.status = '2'
			form.startDate = ''
			form.endDate = ''
		}
		const handleSearch = () => {
			closeFilter()
			pageNum.value = 1
			rawList.value = []
			queryList()
		}

		const loadMore = () => {
			const next = pageNum.value + 1
			if (next > pages.value) return
			pageNum.value = next
			hasScrolled.value = true
			queryList()
		}

		const gotoDetail = (item) => {
			const isView = item.status === '3'
			router.push(`/form-manager/problem?id=${item.id}&isView=${isView}`)
		}

		onMounted(() => {
			queryList()
		})

		return {
			form,
			rawList,
			loading,
			pageNum,
			pages,
			total,
			hasScrolled,
			statusList,
			showFilterPopup,
			showDatePopup,
			onSearch,
			openFilter,
			openBeginDate,
			openEndDate,
			closeFilter,
			confirmDate,
			handleReset,
			handleSearch,
			loadMore,
			gotoDetail,
		}
	},
}
</script>

<style lang="less" scoped>
.problem-list-page {
	height: 100vh;
	background: #f0f0f0;
}
.list-card-wrap {
	padding: 10px;
	background: #f0f0f0;
}
.task-item-list {
	padding: 10px 16px;
	min-height: 100%;
	background: #f0f0f0;
}
.task-item {
	margin-bottom: 10px;
	border-radius: 3px;
	background: #fff;
	padding: 0 0 0 15px;
}
.task-item-hd {
	padding: 10px 0;
	position: relative;
}

.task-item-hd .item-paikou {
	color: #333;
	font-weight: 600;
}

.item-distance {
	color: #999;
	font-size: 12px;
	text-align: right;
	margin: 0 10px 0 10px;
	padding: 5px 0 0 0;
}
.task-item-bd {
	padding: 0 0 10px 0;
}
.task-item-bd .task-item-bd .item-company {
	font-size: 14px;
	color: #666;
}
.item-pointer {
	font-size: 14px;
	font-weight: 600;
	color: #202739;
}
.mt-8 {
	margin-top: 8px;
}

.task-item-ft-item .van-icon {
	margin-right: 3px;
	vertical-align: bottom;
}
.task-item-ft {
	padding: 10px 0;
	vertical-align: top;
}
.task-item-ft-text {
	font-size: 12px;
	line-height: 20px;
	color: #666;
	padding-left: 5px;
}
.value-text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	word-break: break-all;
	padding: 2px 0 0 0;
}

.add-task-popup-tit {
	text-align: center;
	background: #1989fa;
	color: #fff;
	padding: 10px 0;
}

.icon-filter {
	font-size: 20px;
	color: #049dfc;
}

.bot-btn-wrap {
	padding: 15px;
}
.less-time {
	margin-left: 8px;
}
.cell-rwzt {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ebedf0;
	margin: 0 16px;
	padding: 10px 0;
	font-size: 14px;
}
.cell-rwzt-label {
	color: #646566;
}
.margin-right-5 {
	margin-right: 5px;
}

.tag-rwlxmc {
	background-color: #f2f6ff;
	color: #625efd;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 4px;
}
.tag-rwlbmc {
	background-color: #eefdf4;
	color: #31e087;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 4px;
}
.item-jcyzmc {
	background-color: #0067ff;
	border-radius: 4px 4px 0 4px;
	font-size: 10px;
	color: #fff;
	padding: 2px 4px;
	line-height: 10px;
}
.done-button {
	background: linear-gradient(to right, #3de891, #00d96b);
	border-radius: 15px 0 0 15px;
	width: 54px;
	position: absolute;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	top: 2px;
	height: 18px;
	line-height: 18px;
}
.undone-button {
	background: linear-gradient(to right, #7db1ff, #0067ff);
	border-radius: 15px 0 0 15px;
	width: 54px;
	position: absolute;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	top: 2px;
	height: 16px;
	line-height: 16px;
}
.bt-item-col {
	margin: 8px 0 0 0;
}
.task-item-bd .right {
	text-align: right;
	margin: 8px 8px 0 0;
}
.dead-tip-normal {
	color: #15a848;
}
.dead-tip-warn {
	color: #ff3d64;
	font-weight: 600;
}
.progress {
	width: 40%;
	text-align: right;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	position: absolute;
	right: 0;
	top: 35px;
}
.done {
	background: linear-gradient(to right, #3de891, #00d96b);
	border-radius: 15px 0 0 15px;
	padding: 2px 6px;
}
.doing {
	background: linear-gradient(to right, #7db1ff, #0067ff);
	border-radius: 15px 0 0 15px;
	padding: 2px 10px;
}
.progress-button-num {
	color: #fff;
	background: #7db1ff;
	border-radius: 4px 4px 0 4px;
	padding: 2px 4px;
	margin-right: 8px;
}
.tag-item-view {
	position: relative;
	padding: 0 0 0 18px;
}
.warn-icon {
	position: absolute;
	top: 5px;
	left: 0;
}
</style>
